<template>
  <div class="hswiper">
    <img :style="{opacity}" v-for="(item, index) in data[current]" :key="index" :src="item.image" />
    <div @click="prev" class="hswiper-left-btn"><</div>
    <div @click="next" class="hswiper-right-btn">></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      opacity: 1, // 透明度
      current: 0, // 当前显示第几组件图片
      data: [
        [
          {
            image:
              "https://img30.360buyimg.com/babel/s380x300_jfs/t1/89311/17/14891/65540/5e6b0bbdEc5b5fbf9/fa21f3f00ae59b9c.jpg.webp",
            link: "www.baidu.com"
          },
          {
            image:
              "https://img20.360buyimg.com/babel/s380x300_jfs/t1/107569/21/8719/81716/5e6aeacfEd838def7/7189f555fd540bd0.jpg.webp",
            link: "www.baidu.com"
          },
          {
            image:
              "https://img10.360buyimg.com/pop/s380x300_jfs/t1/48237/25/5531/53832/5d322e39E440bf00d/0a0e53700ff2d8df.png.webp",
            link: "www.baidu.com"
          }
        ],
        [
          {
            image:
              "https://img30.360buyimg.com/da/s380x300_jfs/t1/44062/35/12678/26459/5d5cd0c5Ec2a2b751/8e1891d4eda5c71f.png.webp",
            link: "www.baidu.com"
          },
          {
            image:
              "https://img10.360buyimg.com/babel/s380x300_jfs/t1/108557/29/8628/65198/5e69e144E7cce176d/af1fcb08e6d9bbc0.jpg.webp",
            link: "www.baidu.com"
          },
          {
            image:
              "https://img30.360buyimg.com/da/s380x300_jfs/t1/41156/27/9751/50890/5d3388dbE5c65eb1d/3b70e6befb2cba08.png.webp",
            link: "www.baidu.com"
          }
        ]
      ]
    };
  },
  methods: {
    cartoon() {
      //
      this.opacity = 0.5; // 淡出
      setTimeout(() => {
        this.opacity = 1; // 淡入
      }, 200);
    },
    prev() {
      this.cartoon();
      // 如果是第1组件就切换成最后一组
      if (this.current == 0) {
        this.current = this.data.length - 1;
      } else {
        this.current--;
      }
    },
    next() {
      this.cartoon();
      // 如果是最后1组就切换成第一组
      if (this.current == this.data.length - 1) {
        this.current = 0
      } else {
        this.current++;
      }
    }
  }
};
</script>

<style lang="scss">
.hswiper {
  position: relative;
  margin-top: -10px;
  &:hover {
    .hswiper-left-btn,
    .hswiper-right-btn {
      display: block;
    }
  }
  img {
    transition: all 0.2s;
    width: 100%;
    margin-top: 10px;
  }
  &-left-btn,
  &-right-btn {
    display: none;
    background-color: #000;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.2;
    color: #fff;
    &:hover {
      opacity: 0.8;
      cursor: pointer;
    }
  }
  &-left-btn {
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    position: absolute;
  }
  &-right-btn {
    position: absolute;
    right: 0;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
  }
}
</style>